<template>
  <div class="card-list">
    <bill-card-item
      v-for="item in list"
      :key="item.id"
      :type="item.name"
      :num="item.number"
      :money="item.money"
      :select="item.id === selectId"
      @click="() => emits('update:selectId', item.id)"
    />
    <n-button
      dashed
      type="primary"
      class="w100"
      @click="handleAdd"
    >
      <template #icon>
        <n-icon :component="AddOutline" />
      </template>
      添加卡包
    </n-button>
  </div>
</template>

<script lang="ts" setup>
  import { AddOutline } from '@vicons/ionicons5'

  withDefaults(
    defineProps<{
      selectId: number | null
      list: any[]
    }>(),
    {
      selectId: null,
      list: () => []
    }
  )

  const emits = defineEmits(['add', 'update:selectId'])

  // 点击添加卡包
  const handleAdd = () => emits('add')
</script>

<style scoped lang="scss">
  .card-list {
    height: 100%;
    width: 260px;
    margin-right: $space-lg;
    @extend .box;
  }
</style>
